<template>
    <div class="eagle-stepper">
        <van-field :name="name" :label="label" :label-width="labelWidth"  v-bind:class="{ eagle_feild_text : true}">
            <template #input>
                <van-stepper 
                :name="name" 
                v-model="stepperValue"
                :min="min" 
                :max="max" 
                :step="step" 
                :input-width="inputWidth" 
                :button-size="buttonSize" 
                :disabled="disabled" 
                :integer="integer"
                @change="change"/>
                <div v-show="postfix" class="postfix">天</div>
            </template>
        </van-field>
    </div>
</template>
<script>
import { Stepper } from 'vant';
export default {
    components:{
        vanStepper: Stepper,
    },
    name:"eagle-stepper",
    props:{
        stepper: {
            type: [String,Number],
            default: 1
        },
        name:{
            type:String,
            default(){
                return ''
            }
        },
        label:{
            type:String,
            default(){
                return ''
            }
        },
        postfix:{
            type:String,
            default(){
                return ''
            }
        },
        min:{
            type:[Number,String],
            default(){
                return 0;
            }
        },
        max:{
            type:[Number,String]
        },
        step:{
            type:[Number,String],
            default(){
                return 1;
            }
        },
        inputWidth:{
            type:[Number,String],
            default(){
                return "32px";
            }
        },
        buttonSize:{
            type:[Number,String],
            default(){
                return "28px";
            }
        },
        disabled: {
            type: Boolean,
            default() {
                return false;
            },
        },
        integer: {
            type: Boolean,
            default() {
                return false;
            },
        },
        allowEmpty: {
            type: Boolean,
            default() {
                return false;
            },
        },
        labelWidth: {
            type: [Number,String],
            default: '100px'
        },
    },
    data(){
        return {
            
        }
    },
    computed: {
        stepperValue: {
            get() {
                return this.stepper;
            },
            set(value) {
                this.$emit("update:stepper", value);
            }
        }
    },
    watch:{
        stepper (val) {//当数据变化，组件model的双向绑定
			this.$emit('input', val)
            this.$emit('change', val)
		}
    },
    methods:{
        change(value,detail){
            this.$emit("change",value,detail);
        }
    }
}
</script>
<style lang="less" scoped>
.postfix{
    padding-left: 0.2rem;
}
.eagle-stepper {
  position: relative;
}
.eagle-stepper::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0.42667rem;
  bottom: 0;
  left: 0.42667rem;
  border-bottom: 0.02667rem solid #ebedf0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>